<html> 
<body> 
<canvas width="500" height="500" id="canvas"></canvas> 
<script> 
//initialize data set 
var data = [ 100, 68, 20, 30, 100 ]; 
 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
//draw background 
ctx.fillStyle = "white"; 
ctx.fillRect(0,0,500,500); 
//a list of colors 
var colors = [ "orange", "green", "blue", "yellow", "teal"]; 
 
//calculate total of all data 
var total = 0; 
for(var i=0; i<data.length; i++) { 
    total += data[i]; 
}
//draw pie data 
var prevAngle = 0; 
for(var i=0; i<data.length; i++) { 
    //fraction that this pieslice represents 
    var fraction = data[i]/total; 
    //calc starting angle 
    var angle = prevAngle + fraction*Math.PI*2; 
     
    //draw the pie slice 
    //c.fillStyle = colors[i]; 

    //fill with a radial gradient 
    var grad = ctx.createRadialGradient( 250,250, 10, 250,250, 100); 
    grad.addColorStop(0,"white"); 
    grad.addColorStop(1,colors[i]); 
    ctx.fillStyle = grad;
     
    //create a path 
    ctx.beginPath(); 
    ctx.moveTo(250,250); 
    ctx.arc(250,250, 100, prevAngle, angle, false); 
    ctx.lineTo(250,250); 
     
    //fill it 
    ctx.fill(); 
     
    //stroke it 
    ctx.strokeStyle = "black"; 
    ctx.stroke(); 
     
    //update for next time through the loop 
    prevAngle = angle; 
}
//draw centered text 
ctx.fillStyle = "black"; 
ctx.font = "24pt sans-serif"; 
var text = "Sales Data from 2025"; 
var metrics = ctx.measureText(text); 
ctx.fillText(text, 250-metrics.width/2, 400);

 
</script> 
</body> 
</html> 